<template>
	<view class="bg">
		<view class="pl-30 pr-30">
			<view class="teamTop pt-45 flex1 pl-70 size-26 gray-2 bg-1 mb-30">
				<view class="item">
					<view class="white size-26 mb-40">我的团队</view>
					<view class="white">
						<text style="margin-right:20rpx;" class="white size-44">{{total_direct}}</text>人
					</view>
				</view>
			
				<view class="item">
					<view class="mb-40 white size-26">实名人数</view>
					<view class="white">
						<text style="margin-right:20rpx;" class="white size-44">{{authCount}}</text>人
					</view>
				</view>
			</view>
		</view>
		<view class="team-main overflow mlr-20 radius-30">
			<view class="team-main-li flex1" v-for="(item,index) in list" :key="index">
				<view class="team-main-img mr-20">
					<image :src="item.head_image" mode="aspectFill"></image>
				</view>
				<view class=" flex flex-1">
					<view class="">
						<view class="white size-28 mb-10">{{item.phone.substr(0,3)+"****"+item.phone.substr(7)}}</view>
						<view class="color-9 size-22">{{ item.create_time }}</view>
					</view>
					<view class="flex1 flex-middle">
						<!-- <view class="mr-30">
							<view class="white size-28">购买金额</view>
							<view class="white text-center">￥{{ item.price }}</view>
						</view> -->
						<view class="red size-28" :class="{'white':item.is_auth}">{{ item.is_auth == 0 ? '未' : '已' }}认证</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- <view class="plr-30 min100 pt-30" style="background: #111;border-radius: 30rpx 30rpx 0 0;">
			<view class="white mb-30 size-30">
				团队成员
			</view>
			<empty v-if="list.length==0"></empty>
			<view class="" v-else >
				<view class="flex flex-start plr-30 ptb-30 radius-16 size-24 gray-1 mb-30" style="background:#262729" v-for="(item,index) in list" :key="index">
					<image :src="item.head_image" class="teamImg mr-20"></image>
					<view class="flex flex-between" style="width:85%;">
						<view class="">
							<view class="mb-20 white size-26">
								{{item.phone.substr(0,3)+"****"+item.phone.substr(7)}}
							</view>
							<view class="">
								<text v-if="item.is_auth==0">未认证</text>
								<text v-if="item.is_auth==1">已认证</text>
							</view>
						</view>
						<view class="text-right">
							<view class="mb-20 ">
								注册时间
							</view>
							<view class="">
								{{item.create_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				total_direct:0,
				// 已认证人数
				authCount: 0,
				list: []
			}
		},
		onShow() {
			this.getUserInfo()
			this.init();
		},
		methods: {
			getUserInfo () {
				this.$http('api/user/userInfo').then(res => {
					this.total_direct = res.total_direct;
					this.authCount = res.renzheng_number
				})
			},
			init() {
				this.$http('api/user/team').then(res => {
					this.list = res;
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang='less' scoped>
	.red {
		color: red;
	}
	.white {
		color: #FFFFFF;
	}
	.teamTop{
		background: url('@/static/mine/team_bj.png') no-repeat;
		background-size: cover;
		height:230rpx;
		.item {
			flex: 1;
		}
	}
	.teamImg{
		width:90rpx;
		height:90rpx;
		border-radius: 50%;
	}
	.team-main {
		background:f5f5f5;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 40rpx 30rpx 0 30rpx;
		min-height: 100vh !important;
		.team-main-li {
			padding: 30rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			color: #3c3c3c;
		}
	}
	.team-main-img {
		image {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}
	}
</style>
